<template>
    <div>
        <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <span>商品状态</span>
        <van-tag plain v-if="book.status==0" size="large">创建中</van-tag>
        <van-tag plain type="warning" v-if="book.status==1" size="large">待发货</van-tag>
        <van-tag plain type="primary" v-if="book.status==2" size="large">发货中</van-tag>
        <van-tag plain type="success" v-if="book.status==3" size="large">已完成</van-tag>
        <van-tag plain type="danger" v-if="book.status==4" size="large">已取消</van-tag>

        <van-field label="商品编号" v-model="book.bookNumber" readonly />
        <van-field label="商品名" v-model="book.name" readonly />
        <van-field label="商品简介" v-model="book.summary" readonly />
        <img :src="book.pictureUrl" height="100%" width="100%">
        <van-field label="商品价格" v-model="book.bookPrice" readonly />
        <van-field label="创建人" v-model="book.founder" readonly />
        <van-field label="创建时间" v-model="book.creationTime" readonly />
        <van-field v-if="book.status != 0" label="购买人" v-model="book.buyerNumber" readonly />
        <van-field v-if="book.status != 0" label="购买时间" v-model="book.buyerTime" readonly />
        <van-field v-if="book.status != 0" label="快递单号" v-model="book.trackingNumber" readonly />
        <van-button v-if="book.status == 0" round block type="info" @click="onSubmit">
            购买
        </van-button>
        <div style="height:50px"></div>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    data() {
        return {
            bookNumber: 0,
            book: {},
        }
    },
    mounted() {
    },
    methods: {
        onClickLeft() {
            // Toast('返回');
            this.$router.go(-1);//返回上一层
        },
        async onSubmit() {
            let res = await this.$http.BuyBook({ id: this.book.bookNumber })
            if (res !== undefined && res.meta.status == 200) {
                Toast('购买成功');
            }
        },
        async getData(bookNumber) {
            if (bookNumber != undefined) {
                this.bookNumber = bookNumber
                let res = await this.$http.getBookById(bookNumber)
                this.book = res.data
            }
            else
                this.bookNumber = 0

        },
    },
    // 当页面进入时
    beforeRouteEnter(to, from, next) {
        //   window.console.log("你进入了正文页"); // undefined
        //    window.console.log(this); //undefined，不能用this来获取vue实例
        //  window.console.log('组件路由钩子：beforeRouteEnter');
        next(vm => {
            vm
            //    window.console.log(vm); //vm为vue的实例
            //    window.console.log("参数为" + vm.$route.query.id)
            vm.getData(vm.$route.query.id)
            // else
            //     vm.getData(0)
            // if (vm.$route.query.findString != undefined)
            //     vm.getData2(vm.$route.query.findString)
            //    vm.getData2(vm.$route.query.findString)
            //    window.console.log('组件路由钩子beforeRouteEnter的next');
        });
    },
}




</script>

<style >
</style>